<div class="weui-mask" [ngClass]="{ 'weui-mask__in': _shown }" (click)="hide(true)"></div>
<div class="weui-dialog" [ngClass]="{
    'weui-dialog__in': _shown,
    'weui-skin_android': config.skin === 'android',
    'weui-dialog__prompt': config.type === 'prompt'
  }" #container>
  <div class="weui-dialog__hd" *ngIf="config.title">
    <strong class="weui-dialog__title">{{ config.title }}</strong>
  </div>
  <div class="weui-dialog__bd" *ngIf="config.content" [innerHTML]="config.content"></div>
  <div class="weui-cells" *ngIf="config.type === 'prompt' && _shown">
    <ng-container [ngSwitch]="config.input">
      <div *ngSwitchCase="'textarea'" class="weui-cell" [ngClass]="{ 'weui-cell_warn': _prompError }">
        <div class="weui-cell__bd">
          <textarea class="weui-textarea" placeholder="{{ config.inputPlaceholder }}" [(ngModel)]="_promptData"
            name="_promptData" (ngModelChange)="_chanage()" weui-textarea [weui-cn]="config.inputAttributes.cn"
            [maxlength]="config.inputAttributes.maxlength"></textarea>
        </div>
      </div>
      <div *ngSwitchCase="'select'" class="weui-cell weui-cell_select">
        <div class="weui-cell__bd">
          <select class="weui-select" [(ngModel)]="_promptData" name="_promptData" (ngModelChange)="_chanage()">
            <option *ngFor="let i of config.inputOptions" [ngValue]="i">{{ i.text }}</option>
          </select>
        </div>
      </div>
      <div *ngSwitchCase="'radio'" class="weui-cells_radio">
        <label class="weui-cell weui-check__label" *ngFor="let i of config.inputOptions">
          <div class="weui-cell__bd">
            <p>{{ i.text }}</p>
          </div>
          <div class="weui-cell__ft">
            <input type="radio" (click)="_promptData = i" [checked]="i == _promptData" (change)="_chanage()"
              class="weui-check" />
            <span class="weui-icon-checked"></span>
          </div>
        </label>
      </div>
      <div *ngSwitchCase="'checkbox'" class="weui-cells_checkbox">
        <label class="weui-cell weui-check__label" *ngFor="let i of config.inputOptions">
          <div class="weui-cell__hd">
            <input type="checkbox" class="weui-check" (change)="_chanage()" [weui-checklist]="_promptData"
              [weui-value]="i" name="_promptData" />
            <i class="weui-icon-checked"></i>
          </div>
          <div class="weui-cell__bd">
            <p>{{ i.text }}</p>
          </div>
        </label>
      </div>
      <div *ngSwitchCase="'range'" class="weui-slider-box" [(ngModel)]="_promptData" name="_promptData" weui-slider
        [weui-min]="config.inputAttributes.min" [weui-max]="config.inputAttributes.max"
        [weui-step]="config.inputAttributes.step">
        <div class="weui-slider">
          <div class="weui-slider__inner">
            <div class="weui-slider__track"></div>
            <div class="weui-slider__handler"></div>
          </div>
        </div>
        <div class="weui-slider-box__value">{{ _promptData }}</div>
      </div>
      <div *ngSwitchDefault class="weui-cell" [ngClass]="{ 'weui-cell_warn': _prompError }">
        <div class="weui-cell__bd">
          <input type="{{ config.input }}" class="weui-input" placeholder="{{ config.inputPlaceholder }}"
            [(ngModel)]="_promptData" name="_promptData" [maxlength]="config.inputAttributes.maxlength"
            (ngModelChange)="_chanage()" (keyup)="_keyup($event)" />
        </div>
        <div class="weui-cell__ft">
          <i class="weui-icon-warn" *ngIf="_prompError"></i>
        </div>
      </div>
    </ng-container>
  </div>
  <div class="weui-dialog__error" *ngIf="_prompError">{{ config.inputError }}</div>
  <div class="weui-dialog__ft">
    <a href="#" *ngFor="let item of config.btns" class="weui-dialog__btn weui-dialog__btn_{{ item.type }}"
      (click)="_onSelect(item)">{{ item.text }}</a>
  </div>
</div>
